<template>
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="unitEditWinDialogVisible"
      title="修改单位"
      width="50%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="editUnit" label-width="auto">
        <el-form-item  style="font-weight: bold" label="单位编码">
          <el-input v-model="editUnit.unitCode"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="单位名称">
          <el-input v-model="editUnit.unitName"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="是否是主单位">
          <el-radio-group v-model="editUnit.primaryFlag">
            <el-radio :label=1>是</el-radio>
            <el-radio :label=2>否</el-radio>
          </el-radio-group>
        </el-form-item>

        <template v-if="editUnit.primaryFlag == 2">
          <el-form-item style="font-weight: bold" label="主单位">
            <el-select v-model="editUnit.primaryId" style="width: 150px">
              <el-option v-for="primary in primaryUnit" :value="primary.primaryId" :label="primary.primaryName"/>
            </el-select>
          </el-form-item>

          <el-row style="font-weight: bold">
            <el-col>
              <el-form-item label="与主单位换算比例">
                <el-input-number style="width: 220px" min="0" v-model="editUnit.conversionScale"/>
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <el-form-item style="font-weight: bold" label="是否启用">
          <el-radio-group v-model="editUnit.unitStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="备注">
          <el-input v-model="editUnit.unitRemark" type="textarea"/>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelEditUnit">取消</el-button>
        <el-button type="primary" @click="editUnitSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref , watch} from 'vue'
import unitRequest from "@/api/unit.js";
import {ElMessage} from "element-plus";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['editComplete','cancelUnitEdit'])
// 弹窗标记
let unitEditWinDialogVisible = ref(false);
// 当前登录用户的编号
let curUserId = ref();
// 申明的属性
// primaryUnit：主单位数组
// unitId: 当前要编辑的单位的编号
let props = defineProps(["primaryUnit","unitId"]);
// 编辑的单位对象
let editUnit = ref({})

/**
 * 取消编辑按钮事件
 */
function cancelEditUnit(){
  // 将当前的编辑对象置空
  editUnit = ref({});
  // 关闭窗体
  unitEditWinDialogVisible.value = false;
  // 触发暴漏出去的取消编辑的事件
  emits("cancelUnitEdit")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  // 触发暴漏出去的取消编辑的事件
  emits("cancelUnitEdit")
}

/**
 * 编辑提交
 */
function editUnitSubmit(){
  unitRequest.updateUnitById(editUnit.value,res=>{
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"编辑单位成功"
      });
      // 关闭弹窗
      cancelEditUnit();
      // 触发编辑完成的事件
      emits('editComplete',res.data);
    } else if (res.data == '单位编码不能为空') {
      ElMessage({
        type:"warning",
        message:"单位编码不能为空"
      });
    } else if (res.data == '单位名称不能为空') {
      ElMessage({
        type:"warning",
        message:"单位名称不能为空"
      });
    } else if (res.data == '是否是主单位必须选其一') {
      ElMessage({
        type:"warning",
        message:"是否是主单位必须选其一"
      });
    } else if (res.data == '主单位和换算比例不能为空') {
      ElMessage({
        type:"warning",
        message:"主单位和换算比例不能为空"
      });
    } else {
      ElMessage({
        type:"warning",
        message:"修改单位失败"
      });
    }
  })
}

/**
 * 通过unitId加载任务信息
 * @param unitId
 */
function loadUnitById(unitId){
  unitRequest.selectById(unitId,res=>{
    if(res.data){
      editUnit.value = res.data;
      // 弹窗
      unitEditWinDialogVisible.value = true;
    }
  });
}

/**
 * 侦听器 侦听 props.unitId
 * // 每次属性props.unitId发生变化这里都会执行
 */
watch(()=>props.unitId,()=>{
  // 判断unitId是否是-1，如果是-1，说明是取消操作，不需要做任何操作。
  if(props.unitId != -1){
    // 如果不是-1 就加载要编辑的数据
    loadUnitById(props.unitId);
  }
});

onMounted(()=>{
  // 获取用户编号
  curUserId = localStorage.getItem("userId");
  console.log(curUserId);
})
</script>
<style scoped>
</style>